<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-7</title>
    <style type="text/css">
        body,div{margin:0;padding:0;}
        body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
        #countdown{width:450px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
        input{border:0;width:283px;height:50px;cursor:pointer;margin-top;20px;background:url(09/btn-1.png) no-repeat;}

        input.cancel{background-position:0 -50px;}
        span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
    </style>
</head>
<body>
<div id="countdown">
    <span>01</span>分钟<span>40</span>秒
    <input class="" value="" type="button" style="background-image:url(../img/1.0.jpg);width: 370px;"/>
</div>
<script type="text/javascript">
    window.onload = function(){

        //思路:
        //通过将分钟秒转换成秒数来计算倒计时
        //

        //------------------------------------------------
        var countdown = document.getElementById("countdown");
        var input = countdown.getElementsByTagName("input")[0];
        var timer = null;
        input.onclick = function(){
            this.className == "" ? (timer = setInterval(updateTime,1000),updateTime()):(clearInterval(timer));
         
        }

        function updateTime(){
            var aSpan = countdown.getElementsByTagName("span");
            //通过将分钟秒转换成秒数来计算倒计时
            var oRemain = aSpan[0].innerHTML.replace(/^0/,"")*60+parseInt(aSpan[1].innerHTML.replace(/^0/,""));
            //分钟*60+秒 = 剩于的总秒数
            if(oRemain <= 0){
                clearInterval(timer);
                return;
            }

            //否则减一秒
            oRemain--;
            //将总秒数转提取出分钟
            aSpan[0].innerHTML = format(parseInt(oRemain / 60));
            oRemain %= 60;
            //秒
            aSpan[1].innerHTML = format(parseInt(oRemain));
        }

        function format(a)
        {
            return a.toString().replace(/^(\d)$/,'0$1')
        }

    };
</script>
</body>
</html>